import { Space, Tag } from 'antd';
import type { FC, ReactNode } from 'react';
import { useMemo } from 'react';
import Operations from '../Operations';
import Container from '../../hooks';

import { type DisableTypeEnum, JumpWayEnum, MenuTypeEnum } from '@/types/systemManagement/menu';
import { findMenuById } from '@/pages/systemManagement/menu/utils';
import type { IEnums } from '@/types/global';

interface IProps {
  title: ReactNode;
  content: ReactNode;
  menuType?: MenuTypeEnum;
  jumpWay?: JumpWayEnum;
  treeNodeId: number;
}

const MetaInfo: FC<IProps> = ({ title, content, menuType, jumpWay, treeNodeId }) => {
  const {
    form,
    setEditDrawerOpen,
    setEditingId,
    postMenuFindWholeTreeRequest,
    postMenuDeleteRequest,
  } = Container.useContainer();
  const menuTypeConfig = useMemo(() => {
    switch (menuType) {
      case MenuTypeEnum.CAT: {
        return {
          text: '目录',
          color: 'warning',
        };
      }
      case MenuTypeEnum.MENU: {
        return {
          text: '菜单',
          color: 'success',
        };
      }
      case MenuTypeEnum.BTN: {
        return {
          text: '按钮权限',
          color: 'default',
        };
      }
      default: {
        return {
          text: '未知的菜单类型',
          color: 'default',
        };
      }
    }
  }, [menuType]);

  const jumpWayConfig = useMemo(() => {
    switch (jumpWay) {
      case JumpWayEnum.NEW: {
        return {
          text: '新页面',
          color: 'processing',
        };
      }
      case JumpWayEnum.CURRENT: {
        return {
          text: '当前页面',
          color: 'processing',
        };
      }
      default: {
        return {
          text: '未知的跳转方式',
          color: 'default',
        };
      }
    }
  }, [jumpWay]);

  const currentNodeDetail = useMemo(() => {
    return findMenuById(postMenuFindWholeTreeRequest.data, treeNodeId);
  }, [postMenuFindWholeTreeRequest.data, treeNodeId]);

  return (
    <div
      style={{
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
        marginBottom: 8,
        marginTop: 8,
        paddingLeft: 8,
      }}
    >
      <div>
        <Space align="center" size="small">
          <div style={{ fontWeight: 500, color: '#333' }}>{title}</div>
          <Tag color={menuTypeConfig.color} style={{ fontSize: 12 }}>
            {menuTypeConfig.text}
          </Tag>
          {menuType === MenuTypeEnum.MENU && (
            <Tag color={jumpWayConfig.color} style={{ fontSize: 12 }}>
              {jumpWayConfig.text}
            </Tag>
          )}
        </Space>
        <div style={{ color: 'rgba(0, 0, 0, 0.45)', marginTop: 6, width: '100%' }}>{content}</div>
      </div>
      <Operations
        addEvent={{
          hidden: currentNodeDetail?.menuType !== MenuTypeEnum.CAT,
          onClick: () => {
            setEditDrawerOpen(true);
            form.setFieldsValue({
              // level: currentNodeDetail?.level,
              parentId: treeNodeId,
              // parentMenuName: currentNodeDetail?.name,
            });
          },
        }}
        editEvent={{
          menuType: currentNodeDetail?.menuType,
          onClick: () => {
            setEditDrawerOpen(true);
            setEditingId(treeNodeId);
            form.setFieldsValue({
              ...currentNodeDetail,
              btnList: currentNodeDetail?.children
                ?.filter((i) => i?.menuType === MenuTypeEnum.BTN)
                ?.map((i) => ({
                  menuName: i.name,
                  id: i.id,
                  // menuCode: i.menuCode,
                  disableType: i.visible,
                })),
              menuType: currentNodeDetail?.menuType,
              jumpWay: currentNodeDetail?.isFrame,
            });
          },
        }}
        deleteEvent={{
          menuType: currentNodeDetail?.menuType,
          onClick: () => {
            postMenuDeleteRequest.run(
              treeNodeId,
              findMenuById(postMenuFindWholeTreeRequest.data, treeNodeId)?.parentId,
            );
          },
        }}
      />
    </div>
  );
};

export default MetaInfo;
